<template>
  <div class="index-page bg-grey-2 window-height window-width column items-center no-wrap">
    <!--背景 -->
    <div class="banner bg-primary flex flex-center">
       <font style="padding-bottom: 100px;">himygirl</font>
    </div>
    <a class="ribbon" :title="'@vencano v'+appVersion"></a>
    <!-- 登陆 -->
    <div class="text-center">
      <div class="card bg-white shadow-4 column no-wrap flex-center group">
        
        <div v-if="isLoginByMobile">  
            <mobile-captcha-compo v-on:callback-phoneinfo="loginActionMobile"/>
        </div>
        <div v-else>
          <q-field
              icon="account_circle"
              :error="accountError"
              error-label="账户名16位以内非空字符"
              helper="手机号/昵称/邮箱"
              class="full-width"
            ><br><q-input v-model="account" @blur="loginCheckAccount" float-label="账户"/></q-field>
          <q-field
              icon="vpn key"
              :error="passwordError"
              error-label="密码6-16位非空字符"
              class="full-width"
            ><br><q-input v-model="password" @blur="loginCheckPassword" type="password" float-label="密码"/></q-field>
         <q-btn
              color="primary"
              push
              @click="loginActionAccount"
              class="full-width"
              icon="group"
              loader
            > 登录 </q-btn>
        </div>

      
        <a @click="viewPrivacyPolicy">简要声明 </a>
        <div class="col-xs-12 col-sm-12">
           <q-btn class="col-sm-6" flat rounded color="warning" @click="$router.push('/menus')">随便看看</q-btn>
          <q-toggle 
              class="col-sm-6"
              v-model="isLoginByMobile"
              checked-icon="perm phone msg"
              unchecked-icon="account_circle"
            >切换登录</q-toggle>
           
        </div>
       
        <!-- 隐私声明 -->
        <private-policy ref="private" />
      </div>
    </div>
   
  </div>
</template>

<script>
import { QBtn, QInput, QIcon, QField, QToggle, } from "quasar";
import PrivatePolicy from "./private-policy";
import mobileCaptchaCompo from "./views/mobile-captcha-compo";
import Storage from '../utils/storage'
import customerApi from '../https/customerApi';
import StorePouch from "../utils/StorePouch";
import { JSEncrypt } from 'jsencrypt'
export default {
  components: {
    QBtn,
    QInput,
    QIcon,
    QField,
    QToggle,
    PrivatePolicy,
    mobileCaptchaCompo,
  },
  data() {
    return {
      captchaTip: "获取验证码",
      countdownSeconds: null,
      isLoginByMobile: true,
      accountError: false,
      passwordError: false,
      account: "",
      password: "",
      isAllowSend: false, //是否禁止发送
      platform: this.$q.platform.is
    };
  },
computed:{
  isAutoLogin(){
    return false;
    // const {platform} = this.platform;
    // console.log('当前平台：',platform);
    // if(platform != 'win') {
    //   return true;
    // }
    // return false;
  },
  appVersion() {
    return global.APP_VERSION || '1.0.1';
  }
},
mounted() {
    StorePouch.tokenDbGet(StorePouch.tokenId(),function(_token){
      console.log('是否存在持久化:',_token);
      if(_token) {
        const querystring = require("querystring");
        const params = querystring.stringify({account:_token.account,password:_token.password,isAutoLogin:this.isAutoLogin});
        console.log("持久化登录:", params);
        customerApi.loginAccount(params).then(res=>{
           if(res.status == 200) {
              //将token存储到PouchDb中(解决移动端,localStorage异常问题)
              StorePouch.tokenDbAdd(StorePouch.tokenId(),this.account,rsaPassWord)
              this.getUserinfo();
              this.$router.replace("/menus");
            }
        }).catch(err=>{
        })
      }
    });
},
  methods: {
    resetCheck() {
      this.accountError = false;
      this.passwordError = false;
    },
    loginActionMobile(item) {
      if(item) {
        const querystring = require("querystring");
        const params = querystring.stringify({mobile:item.mobile,captcha:item.captcha,isAutoLogin:this.isAutoLogin});
        console.log("手机号验证码登录:", params);
        customerApi.loginCaptcha(params).then(res=>{
            if(res.status == 200) {
              //将token存储到PouchDb中(解决移动端,localStorage异常问题)
              console.log('res-headers-tokenkey:',res.headers.tokenkey);
              this.getUserinfo();
              this.$router.replace("/menus");
            }
        }).catch(err=>{
        })
      }
    },
    getUserinfo() {
       customerApi
          .userinfo()
          .then(res => {
            const { data } = res;
            Storage.saveuser(data);
          })
          .catch(err => {
            Storage.removeCuruser();
          });
    },
    /**账户密码登录 */
    loginActionAccount(e,done) {
      if (!this.isLoginByMobile && this.loginCheckAccount() && this.loginCheckPassword()) {
        const querystring = require("querystring");
        // RSA 加密
        let encryptor = new JSEncrypt()
        encryptor.setPublicKey('MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCdLX+DOAuH1f8KoXONkNv6/6tF6mk7r1mlsesNi/RKJ5yppTJXN9Oz1nO1Q5pOgzizIYJdz6ldxnZdq4iVPfjgI5WQacSM0/KiusaONM+JpIpRvVsaE0wZGy2AKxTcJTLD8Wa2sUD1fYCu/dTciQw8JdEkEeeXJwkURvCYZX/mQQIDAQAB')
        let rsaPassWord = encryptor.encrypt(this.password)
        const params = querystring.stringify({account:this.account,password:rsaPassWord,isAutoLogin:false});
        console.log("账户密码登录:", params);
        customerApi.loginAccount(params).then(res=>{
           if(res.status == 200) {
              //将token存储到PouchDb中(解决移动端,localStorage异常问题)
              StorePouch.tokenDbAdd(StorePouch.tokenId(),this.account,rsaPassWord)
              this.getUserinfo();
              this.$router.replace("/menus");
              done();//终止按钮loading状态
            }
        }).catch(err=>{
            done();
        })
      }else {
        done();
      }
    },
    loginCheckAccount() {
      const _account = this.account;
      if (_account == null || _account.length > 16 || _account.length == 0) {
        this.accountError = true;
        return false;
      } else {
        this.accountError = false;
        return true;
      }
    },
    loginCheckPassword() {
      const _password = this.password;
      if (_password == null || _password.length > 16 || _password.length <= 0) {
        this.passwordError = true;
        return false;
      } else {
        this.passwordError = false;
        return true;
      }
    },
    //查看隐私声明
    viewPrivacyPolicy() {
      this.$refs.private.show();
    }
  }
};
</script>

<style lang="styl">
.index-page
  .banner
    height 40vh
    width 100%
    font-size 15vmax
    font-family: -webkit-pictograph
    font-style: italic
    color rgba(255, 255, 255, 0.2)
    overflow hidden
  .card
    width 90vw
    max-width 500px
    padding 10px 25px
    margin-top -100px
    border-radius 2px
    img
      height 140px
      width 140px

.ribbon
  width 12.1em
  height 12.1em
  position absolute
  overflow hidden
  top 0
  right 0
  z-index 39
  pointer-events none
  font-size 15px
  text-decoration none
  text-indent -999999px
  opacity 0.7
  &.fixed
    position fixed
  &:before
    content ""
    padding 0.38em 0
    background-color white
    background-image linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15))
    box-shadow 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5)
    pointer-events auto
  &:after
    content attr(title)
    color #027be3
    line-height 1.54em
    text-decoration none
    text-align center
    text-indent 0
    padding 0.15em 0
    margin 0.15em 0

  &:before, &:after
    position absolute
    display block
    width 15.38em
    height 1.74em
    top 3.23em
    right -3.23em
    transform rotate(45deg);
</style>
